<template>
    <div class="nav-wrap cf">
        <div id="tp-weather-widget" v-if="config.weather.value == 'on'"></div>
        <ul class="fl nav-box shadow no-select">
            <li @click="pageHref('/store')">发现</li>
        </ul>

        <ul class="fr nav-box shadow no-select">
            <li @click="openDrawer">
                <SettingOutlined/>
            </li>
        </ul>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {SettingOutlined} from '@ant-design/icons-vue';

    import {goUrl} from '/src/util/index';

    export default {
        name: "Nav",
        components: {
            SettingOutlined,
        },
        data() {
            return {
                // vuex 状态
                config: useStore().state.skin.default,
            }
        },
        created() {
            this.init();
        },
        mounted() {

        },
        methods: {
            // 初始化
            init() {
                if (this.config.weather.value == 'on') {
                    this.weather();
                }
            },
            // 页面切换
            pageHref(url) {
                goUrl(url);
            },
            // 天气插件
            weather() {
                let that = this,
                    key = that.config.weather.key;
                if (key) {
                    (function (a, h, g, f, e, d, c, b) {
                        b = function () {
                            d = h.createElement(g);
                            c = h.getElementsByTagName(g)[0];
                            d.src = e;
                            d.charset = "utf-8";
                            d.async = 1;
                            c.parentNode.insertBefore(d, c)
                        };
                        a["SeniverseWeatherWidgetObject"] = f;
                        a[f] || (a[f] = function () {
                            (a[f].q = a[f].q || []).push(arguments)
                        });
                        a[f].l = +new Date();
                        if (a.attachEvent) {
                            a.attachEvent("onload", b)
                        } else {
                            a.addEventListener("load", b, false)
                        }
                    }(window, document, "script", "SeniverseWeatherWidget", "//cdn.sencdn.com/widget2/static/js/bundle.js?t=" + parseInt((new Date().getTime() / 100000000).toString(), 10)));
                    window.SeniverseWeatherWidget('show', {
                        flavor: "bubble",
                        location: "WX4FBXXFKE4F",
                        geolocation: true,
                        language: "auto",
                        unit: "c",
                        theme: "dark",
                        token: key,
                        hover: "enabled",
                        container: "tp-weather-widget"
                    })
                } else {
                    that.$message.error('缺少天气配置参数: key');
                }
            },
            // 检测TOKEN
            checkToken() {
                let that = this,
                    token = localStorage.getItem(website.token) || '';
                //console.log('token', token);
                if (token) {
                    checkToken({
                        token: token
                    }).then(res => {
                        that.$store.commit('setToken', token);
                    }).catch(err => {
                        that.$store.commit('setToken', '');
                    })
                }
            },
            // 打开抽屉
            openDrawer() {
                // console.log('openDrawer');
                this.$store.commit('openSettingPanel');
            },
        }
    }
</script>

<style lang="less" scoped>

    .nav-wrap {
        padding-top: 20px;

        .nav-box {
            border-radius: 100px;
            padding: 0 10px;
            font-size: 0;
            min-width: 60px;
            background-color: white;

            li {
                display: inline-block;
                font-size: 14px;
                min-width: 40px;
                height: 20px;
                line-height: 20px;
                margin: 8px 0;
                padding: 0 10px;
                text-align: center;
                cursor: pointer;
                /*border-right: 1px solid #d3d3d3;*/
                position: relative;
                color: #333;

                &:hover, &.active {
                    color: #1E9FFF;
                }

                &:after {
                    content: '';
                    border: 1px solid #d3d3d3;
                    position: absolute;
                    right: 0;
                    top: 5px;
                    height: 10px;

                }

                &:last-child:after {
                    content: none;
                }
            }
        }
    }

    .user-wrap {
        .ant-modal-footer {
            text-align: center !important;
        }
    }
</style>
<style>
    #tp-weather-widget .sw-container {
        z-index: 100000 !important;
        position: fixed !important;
        left: 10px !important;
        bottom: 10px !important;
        top: auto !important;
    }

    .wx-wrap .ant-modal-body {
        text-align: center;
    }

    .wx-wrap .ant-modal-body .wx-img {
        display: inline-block;
        width: 152px;
        height: 152px;
    }

    .setting-drawer .ant-drawer-body {
        padding: 16px;
    }

    .ant-form-item {
        margin: 0;
    }

</style>